<template>
  <button
    type="button"
    @click="click"
    :disabled="disabled"
    :class="[
      color,
      size,
      {
        circle,
        round: !circle && round,
      },
    ]"
  >
    <loading :type="loading" v-if="loading > 0" />
    <i :class="[`mu-icon-${icon}`]" v-if="icon && loading < 1"></i>
    <span v-if="$slots.default">
      <slot></slot>
    </span>
  </button>
</template>
<style lang="scss" scoped>
@import "../variable.scss";

.circle {
  border-radius: 50%;
  padding: 12px;
}

.round {
  border-radius: 20px;
}

button {
  border-radius: 3px;
  outline: none;
  border: none;
  padding: 10px 20px;
  line-height: 1;
  color: white;
  cursor: pointer;
}

@mixin background($color) {
  background: $color;
  color: $white;
  &:hover {
    background: rgba($color: $color, $alpha: 0.7);
  }
  &:active {
    background: mix($color, rgb(130, 130, 130));
  }
  &[disabled] {
    cursor: not-allowed;
    background: rgba($color: $color, $alpha: 0.5);
  }
}

.white {
  @include background($white);
  color: $black;
}

.green {
  @include background($green);
}

i + span {
  margin-left: 5px;
}

.red {
  @include background($red);
}

.blue {
  @include background($blue);
}

.black {
  @include background($black);
}

.yellow {
  @include background($yellow);
}

.orange {
  @include background($orange);
}
.gray {
  @include background($gray);
}

.medium {
  font-size: $medium;
}

.large {
  font-size: $large;
}

.small {
  font-size: $small;
}

.mini {
  font-size: $mini;
}
</style>
<script>
//颜色
const colors = [
  "white",
  "red",
  "green",
  "blue",
  "black",
  "yellow",
  "orange",
  "gray",
];
//大小
const sizes = ["large", "medium", "small", "mini"];
//支持的图标
const icons = ["search", "success", "warn"];

import loading from "../loading/index.vue"; //为了防止未注册

export default {
  name: "mu-button",
  components: {
    loading,
  },
  methods: {
    //点击事件
    click(e) {
      this.$emit("click", e);
    },
  },
  props: {
    //是否可用
    disabled: Boolean,
    //按钮颜色
    color: {
      type: String,
      default: "green",
      validator(value) {
        return colors.includes(value);
      },
    },
    //是否圆形按钮
    circle: Boolean,
    //是否圆角
    round: Boolean,
    //大小
    size: {
      type: String,
      default: "medium",
      validator(value) {
        return sizes.includes(value);
      },
    },
    //图标
    icon: {
      type: String,
      default: null,
      validator(value) {
        return icons.includes(value);
      },
    },
    //是否加载
    loading: {
      type: Number,
      default: 0,
    },
  },
};
</script>